import { View } from "@tarojs/components";
import { List, Loading, Popup } from "@taroify/core";
import { getOnlineStrategy } from "@/api";
import { useState } from "react";
import Title from "@/components/Title";
import { RecuType } from "@/types";

export default () => {
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [list, setList] = useState<Array<RecuType>>([]);
  const pager = { page: 1, limit: 20 };
  function getData() {
    setLoading(true);
    getOnlineStrategy(pager)
      .then((res: { rows: Array<RecuType>; total: number }) => {
        if (res.rows.length > res.total) {
          setHasMore(false);
        }
        setList([...list, ...res.rows]);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  }
  return (
    <View className="bg-[#F6F6F6] p-3">
      <Title title="在线策略" />

      <List
        className="mt-12"
        loading={loading}
        hasMore={hasMore}
        onLoad={getData}
      >
        <View className="flex flex-col gap-3 mt-2 px-4">
          {list.map((item: RecuType, i) => (
            // <MatchCard item={item} key={i} />
            <View>{item.index}</View>
          ))}
        </View>
        <List.Placeholder>
          <View className="text-xs">
            {loading && <Loading size="24px">加载中...</Loading>}
            {!hasMore && "没有更多了"}
          </View>
        </List.Placeholder>
      </List>
    </View>
  );
};
